<script lang="ts" setup>
import { useRequest } from 'vue-request';
import { getListByConditions, setRoleIdByUserId, urls } from '@/index';
import type { DialogModel, Role, User } from '@/index.d';
const drawerModel = defineModel<DialogModel<User>>('drawerModel', { required: true });
const currentUser = defineModel<User>('currentUser', { required: true });
const getRoleListPromise = () =>
  getListByConditions<Role>(urls.role, { userId: currentUser.value.id });

const { data, run, loading } = useRequest(getRoleListPromise);

const handleChange = async (roleId: number, selected: boolean) => {
  await setRoleIdByUserId(currentUser.value.id as number, roleId, selected);
  run();
};
</script>
<template>
  <el-drawer v-model="drawerModel.visible" size="40%" :title="`为${currentUser.name}分配角色`">
    <hq-table :table-data="data" :base-url="urls.role" :loading title="分配角色">
      <template #columns>
        <hq-table-column label="名称" prop="name" />
        <hq-table-column label="类型" prop="type" />
        <hq-table-column label="角色状态">
          <template #default="{ row }">
            <el-switch
              v-model="row.selected"
              inline-prompt
              active-text="使用"
              inactive-text="停用"
              :active-value="true"
              :inactive-value="false"
              @change="handleChange(row.id, row.selected)"
            />
          </template>
        </hq-table-column>
      </template>
    </hq-table>
  </el-drawer>
</template>
<style lang="scss" scoped></style>
